<template>
  <div>
    <van-notify id="van-notify" />
    <img class="img" src='/static/images/miao.jpeg' >
    <van-cell-group >
      <van-field
        left-icon="manager"
        required
        clearable
        label="用户名"
        placeholder="请输入用户名"
        @click-icon="onClickIcon"
        @confirm="confirm_username"
      />
      <van-field
      left-icon="comment"
      required
      clearable
      label="邮箱地址"
      placeholder="请输入邮箱"
      @click-icon="onClickIcon"
      @confirm="confirm_email"
    />
      <van-field
        left-icon="phone"
        required
        clearable
        label="手机号"
        placeholder="请输入手机号"
        @click-icon="onClickIcon"
        @confirm="confirm_phoneNumber"
      />
      <van-field
        left-icon="location"
        required
        clearable
        label="地址信息"
        placeholder="请输入地址"
        @click-icon="onClickIcon"
        @confirm="confirm_address"
      />

    </van-cell-group>
      <van-cell @click="toHistory" title="查看历史成绩" icon="todo-list" is-link />
    <div class="btn">
        <van-button @click="submit">提交</van-button>
    </div>
  </div>
</template>
<style >
  .img{
    width: 100%;
  }

  .btn{
    text-align: center;
    vertical-align: middle;
  }
</style>



<script>
  import Notify from '@/../static/vant/notify/notify'
  import ChangeApi from '@/api/accountChange'
  export default {
    name: 'user',
    data () {
      return {
        mes: {},
        user: {
          username: '123456',
          email: '',
          phoneNumber: ''
        }
      }
    },
    methods: {
      toHistory () {
        wx.navigateTo({url: '../history/main'})
      },
      submit () {
        Notify('进来了1')
        ChangeApi.accountChange(this.user)
          .then((resp) => {
            console.log(resp)
            this.mes = resp
          })
          .catch((error) => {
            console.log(error)
            Notify(error)
          })
      },
      confirm_username (event) {
        this.user.username = event.mp.detail
      },
      confirm_email (event) {
        this.user.email = event.mp.detail
      },
      confirm_phoneNumber (event) {
        this.user.phoneNumber = event.mp.detail
      },
      confirm_address (event) {
      }
    }
  }
</script>

